<template>
  <div style="height: 580px; overflow-y: auto" id="box">
    <div class="box1">
      <span>资产负债表</span>
      <span class="sp1">
        <el-button type="primary">导入</el-button>
        <el-button type="primary" style="font-size: 20px">
          <el-icon><Download /></el-icon> </el-button
      ></span>
    </div>
    <div class="box2">
      <div class="box3"><span></span>年<span></span>月<span></span>日</div>
      <div class="p">
        金额单位：<span style="width: 20px; display: inline-block"></span>元
      </div>
    </div>
    <!-- 表格 -->
    <el-table
      ref="singleTableRef"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      @current-change="handleCurrentChange"
    >
      <el-table-column type="index" label="行次" width="100" />
      <el-table-column property="date" label="项目" width="300" />
      <el-table-column label="年末金额" width="300">
        <el-input v-model="input1" size="large"
      /></el-table-column>
      <el-table-column label="年初金额" width="300">
        <el-input v-model="input2" size="large"
      /></el-table-column>
    </el-table>
    <p style="height: 100px"></p>
    <div id="btn">
      <div id="but">
        <el-button type="primary" class="btn" @click="tijiao()">提交</el-button>
        <el-button type="primary" class="btn" @click="baocun()">保存</el-button>
        <el-button type="primary" class="but" @click="fanhiu()">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { tableData } from "./data";
var input1 = ref();
var input2 = ref();
const handleCurrentChange = () => {};
let fanhiu = () => {
  router.go(-1);
};
/* 提交 */
let tijiao = () => {
  ElNotification.success({ message: "提交成功!" });
};
/* 保存 */
let baocun = () => {
  ElNotification.success({ message: "保存成功!" });
};
</script>

<style scoped>
.box1 {
  text-align: center;
  height: 40px;
}
.sp1 {
  float: right;
}
.box2 {
  text-align: center;
  display: flex;
  justify-content: space-between;
}
.box3 span {
  width: 10px;
  display: block;
}
.box3 {
  display: flex;
}
.but {
  background: none;
  color: #4eabfe;
}
#but {
  float: right;
  height: 50px;
}
.btn {
  /* background: #3985c8; */
  color: white;
  width: 100px;
}
#btn {
  width: 66%;
  padding: 20px;
  background: white;
  height: 50px;
  position: fixed;
  bottom: 0px;
  right: 150px;
  z-index: 9999999;
}
</style>